<template>
  <div class="address">
    <div class="mask" @click="hidden"></div>
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="添加地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <div class="con">
      <!-- 输入任意文本 -->
      <van-field v-model="name" label="姓名" />
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="text" label="手机号" />
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field v-model="local" @click="show" type="text" label="地址" />
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="address" type="text" label="详细地址" />
    </div>

    <div class="text">
      <input type="checkbox" v-model="check" />
      <p>设为默认收货地址</p>
    </div>

    <van-button @click="saveaddress" type="danger">保存</van-button>

    <van-area
      class="map"
      title="标题"
      @confirm="save"
      :area-list="areaList"
      :columns-placeholder="['请选择', '请选择', '请选择']"
    />
  </div>
</template>

<script>
import areaList from "@/assets/area";
import $ from "jquery";
import {
  deleteAction,
  detailAction,
  listAction,
  saveAction,
  getListAction,
} from "@/api/my/index";
export default {
  data() {
    return {
      addressInfo:{
id:"2222",
name:'222'
      },
      check: '',
      //   isshow: false,
      name: "",
      tel: "",
      local: "",
      address: "",
      id: "",
      areaList,
    };
  },
  created() {
    console.log(this.$route.params.data);
    this.datalist = this.$route.params.data;
    var data = this.$route.params.data;
    this.name = data.name;
    this.tel = data.mobile;
    this.local = data.address;
    this.id = data.id;
    this.check=data.is_default;
    this.address = data.address_detail;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    show() {
      $(".mask").fadeIn("500");
      $(".map").slideToggle("500");
    },
    hidden() {
      $(".mask").fadeOut("500");
      $(".map").slideToggle("500");
    },
    save(content) {
      console.log(content);
      var str = "";
      this.address = content.forEach((el) => {
        str += el.name;
      });
      this.local = str;
      $(".mask").fadeOut("500");
      $(".map").slideToggle("500");
    },
    saveaddress() {
      saveAction({
        address: this.local,
        addressId: this.id,
        checked: this.check,
        detailadress: this.address,
        openId: localStorage.getItem("openId"),
        telNumber: this.tel,
        userName: this.name,
      }).then((res) => {
        console.log(res);
        if (res.data) {
          this.$router.go(-1);
        }
      });
    },
  },
};
</script>

<style scoped lang='less'>
.van-button {
  width: 335px;
  margin: 20px auto;
  border-radius: 6px;
}
.text {
  input {
    width: 20px;
    height: 20px;
    float: left;
  }
  p {
    float: left;
    line-height: 30px;
    margin-left: 10px;
  }
  text-align: left;
  height: 20px;
  width: 335px;
  padding: 10px 20px;
  margin-top: 20px;
}

.address {
  position: relative;
  .van-area {
    width: 375px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: none;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 667px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 300;
    width: 375px;
    display: none;
  }
}
</style>